<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
                <div v-if="crud.props.searchToggle">
                    <!-- 搜索 -->
                    <el-input v-model="query.blurry" clearable size="small" placeholder="账户名称/公司名称/银行卡号模糊搜索"
                      style="width: 270px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
                    <el-select v-model="query.uid" clearable class="filter-item" style="width: 150px" 
                              placeholder="请选择用户名称" @change="crud.toQuery" filterable>
                        <el-option
                        v-for="(item, index) in users"
                        :key="item.username + index"
                        :label="item.username"
                        :value="item.uid"
                        />
                    </el-select>
                    <rrOperation :crud="crud"/>
                </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission"/>
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                       :title="crud.status.title" width="500px">
                <el-form ref="form" :model="form" :rules="rules" size="small"
                         label-width="100px">
                                <el-form-item label="用户名称" prop="uid">
                                    <el-select v-model="form.uid" style="width: 350px" v-if="crud.status.title == '新增用户银行卡'"
                                            placeholder="请选择用户名称" @change="getMemberUser" clearable filterable>
                                        <el-option
                                        v-for="(item, index) in users"
                                        :key="item.phone + index"
                                        :label="item.phone"
                                        :value="item.uid"
                                        />
                                    </el-select>

                                    <el-select v-model="form.uid" style="width: 350px" v-if="crud.status.title == '编辑用户银行卡'"
                                            disabled placeholder="请选择用户名称" @change="getMemberUser" clearable filterable>
                                        <el-option
                                        v-for="(item, index) in users"
                                        :key="item.phone + index"
                                        :label="item.phone"
                                        :value="item.uid"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="转账类型" prop="transferType">
                                     <el-radio v-model="form.transferType" :label="0">对私转账</el-radio>
                                     <el-radio v-model="form.transferType" :label="1">对公转账</el-radio>
                                </el-form-item>
                                <el-form-item prop="accountName" v-if="form.transferType == 0 || form.transferType == null"
                                        label="账户名称">
                                        <el-input v-model="form.accountName" style="width: 350px;"/>
                                </el-form-item>
                                <el-form-item v-if="form.transferType == 1 || form.transferType == null"
                                        label="公司名称" prop="corporationName">
                                        <el-input v-model="form.corporationName" style="width: 350px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="银行卡号" prop="bankCode">
                                        <el-input v-model="form.bankCode" style="width: 350px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="开户行地址" prop="bankAddress">
                                        <el-input v-model="form.bankAddress" style="width: 350px;"/>
                                </el-form-item>
                                
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="crud.cancelCU">取消</el-button>
                    <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
                </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                      @selection-change="crud.selectionChangeHandler">
                <el-table-column type="selection" width="55"/>
                                <el-table-column v-if="columns.visible('userName')"
                                                 prop="userName"
                                                 label="用户名称"/>
                                <el-table-column v-if="columns.visible('transferType')"
                                                 prop="transferType"
                                                 label="转账类型">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.transferType==0"> 对私转账</div>
                                        <div v-else>对公转账</div>
                                    </template>
                                </el-table-column>

                                <el-table-column label="银行卡信息" min-width="220px">
                                    <template slot-scope="scope">
                                        <div>
                                            <span v-if="scope.row.transferType == 0 || scope.row.transferType == null">
                                            账户名称：{{ scope.row.accountName }}<br>
                                            </span>
                                            <span v-if="scope.row.transferType == 1 || scope.row.transferType == null">
                                            公司名称：{{ scope.row.corporationName }}<br>
                                            </span>
                                            银行卡号：{{ scope.row.bankCode }}<br>
                                            开户行地址：{{ scope.row.bankAddress }}<br>
                                        </div>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column v-if="columns.visible('createTime')"
                                                 prop="createTime" min-width="100px"
                                                 label="创建时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.createTime) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('updateTime')"
                                                 prop="updateTime" min-width="100px"
                                                 label="更新时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-permission="['admin','UserBindCard:edit','UserBindCard:del']" label="操作"
                                     width="150px" align="center">
                                <template slot-scope="scope">
                                    <udOperation :data="scope.row" :permission="permission"/>
                                </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import { getAllMemberUser } from '@/api/memberUser'
    import crudBankCard from '@/api/userBankCard'
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";

    // crud交由presenter持有
    const defaultCrud = CRUD({
        title: '用户银行卡',
        url: 'api/bankCard',
        sort: 'id,desc',
        crudMethod: {...crudBankCard}
    })
    const defaultForm = {id: null, uid: null, userName: null, transferType: null, accountName: null, corporationName: null, bankCode: null, bankAddress: null, createTime: null, updateTime: null, isDel: null}
    export default {
        name: 'UserBindCard',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        data() {
            return {
                users: [],
                permission: {
                    add: ['admin', 'UserBindCard:add'],
                    edit: ['admin', 'UserBindCard:edit'],
                    del: ['admin', 'UserBindCard:del']
                },
                rules: {
                    uid: [
                        {required: true, message: '请选择用户名称', trigger: 'blur'},
                    ], 
                    transferType: [
                        {
                            required: true,
                            message: '请选择转账类型',
                            trigger: 'blur'
                        }
                    ], 
                    accountName: [
                        {required: true, message: '账户名称不能为空', trigger: 'blur'},
                        {min: 1, max: 80, message: '长度在 1 到 80 个字符', trigger: 'blur'}
                    ], 
                    corporationName: [
                        {required: true, message: '公司名称不能为空', trigger: 'blur'},
                        {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
                    ],
                    bankCode: [
                        {required: true, message: '银行卡号不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 200 个字符', trigger: 'blur'}
                    ], 
                    bankAddress: [
                        {required: true, message: '开户行地址不能为空', trigger: 'blur'},
                        {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted:function(){ //在页面加载参数结束后执行某个函数
            this.$nextTick(function(){
                //调用需要执行的方法
                this.getMemberUser()
            })      
        },
        watch: {
        },
        methods: {
            // 获取数据前设置好接口地址
            [CRUD.HOOK.beforeRefresh]() {
            }, // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
            },
            getMemberUser() {
                getAllMemberUser().then(res => {
                    this.users = res
                }).catch(() => { })
            }
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
